<html>
    <head>
        <title>css 的 学习</title>
        <meta charset="UTF-8">

        <style type="text/css">
        /* 被style标签包围的范围是CSS环境 可以写CSS代码 */
        
        /* 标签样式表 */
        p{
            color: red;
        }

        /* 类样式 */
        .f20{
            font-size: 20px;
        }

        /* ID样式 */
        #p4{
            background-color: pink;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }

        /* 组合样式 */
        div p{
            color: blue;
        }

        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
        </style>

       
<!-- 或者是 -->
        <link rel="stylesheet" href="demo06.css">

    </head>
    <body>
        <p>这是段落一</p>
        <p>这是段落二</p>
        <p class="f20">这是段落三</p>
        <p id="p4">这是段落四</p>
        <!--
            id属性在整个HTML文档中 ， 尽量保持唯一 虽然重复也不会报错
        -->

        <div>
            <p><span style="font-size: 60px;font-weight: bolder;color: yellow;">HELLO</span></p>
            <span class="f32">WORLD</span>
            <p>!!!</p>
        </div>

    </body>
</html>

<!--
    CSS的语法分类： 
        标签样式表    类样式表      ID样式表
        p            class .f20   id #p4

        组合样式

        嵌入式样式表    内部样式表      外部样式表
        p + style       head + css    外部文件css
    -->